<template>
  <div class="hello_home">
    <h1>2050 - 来自遥远宇宙深处的 银河系边缘的小孩</h1>
    <div class="hello_home_Top">
      <img src="./img/你好地球.jpg" alt="2050" class="hello_img" />
      <div class="hello_home_button">
        <el-button type="warning" @click="handshakeClick">握手招呼</el-button>
        <div>
          <el-icon><Pointer /></el-icon>
        </div>
      </div>
    </div>
    <h3 :class="hello_h3?'hello_h3':'hello_1h3'">
         {{count}}
    </h3>
  </div>
</template>

<script>

import { ref } from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup(){
    const title= ref('亲爱的地球人,希望你们可以把地球的故事告诉我,我们做朋友好不好啊!!! 嘻嘻!!!')
    return {
      title
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.hello_home {
  .hello_home_Top{
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .hello_h3 {
    opacity: 0;
  }
  .hello_1h3 {
    opacity: 1;
  }
  .hello_img {
    width: 25%;
  }
  .hello_home_button {
    display: inline-block;
    margin-left: 5%;
  }
}
</style>
